<!DOCTYPE html>
<html lang="en">
<head>
  
<meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>指令操作</title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">


 <link rel="stylesheet" href="http://106.12.207.1:8080/wuliucommon/css/sm.min.css">
  <link rel="stylesheet" href="http://106.12.207.1:8080/wuliucommon/css/sm-extend.min.css">
  <script type="text/javascript" src="http://106.12.207.1:8080/wuliucommon/common/common/common.js"></script>
  

  <style>

.content{
      background-color: white;
    }


    .fahuo{
      display: flex;
      justify-content: flex-start;
    }
    .mykind{
      display: flex;
      justify-content: flex-start;
    }
    .thenum{
      display: flex;
      justify-content: flex-start;
    }
    .submitLeft{
      display: flex;
      justify-content: space-between;
    }


    .theend .mysubmit{
      width: 33%;
      text-align: center;
    }
    .fifty{
      width: 50%;
    }
    .thirty-three{
      width: 33%;
    }

    .contentPadding{
      padding: 0;
      /* margin: 0; */
      margin: 0.2rem 0.2rem;
    }
    .childContent{
      margin: 0.5rem 0 0 0;
      border: solid 1px #c3bebe;
      border-radius: 2px;
      width: 100%;
      background-color: #fcfcfc;
      box-shadow: 0px 0px 1px 2px #f2efef;
    }
    .segmentation{
      padding: 0.25rem 0;
    }
    .segmentationLast{
      padding: 0.25rem 0;
    }
    .issued{
      text-align: right;
      color: red;
      font-size: 15px;
      margin-bottom: -0.4rem;
    }
    .listMargin{
      margin: 0.5rem 0;
    }
    .list-block ul{
      padding-bottom: 0.5rem;
    }

#divtop_unid{
  width:50%;
  height:42px;
  text-align: center;
  color:black;
  background-color: white;
  z-index: 1000;
}

#divtop_id{
  width:50%;
  height:42px;
  text-align: center;
  color:black;
  background-color: white;
  z-index: 1000;
}

.tab-link{
  z-index: 1000;
  background: white;
}

#li_block{
  margin: 2rem 0;
}


#searchinput{
  padding: 0;
  background-color: blue;
  border-radius:5px;
  outline-style: none;
 }
 .search{
  padding-top:20px;
  padding-left: 12px;
  width: 100%;
  background-color: white;
  z-index: 2000;
  position: absolute;
  top: 30px;
 }

 .search input{
  float: left;
  width: 85%;
  text-align: center;
  color:black;
  height: 32px;
  padding-left:10px;
  color: black;
 }
 .search img{
  float: right;
  height: 30px;
  width: 30px;
  margin-right:12px;
  cursor: pointer;
 } 

   /*ol li:before {
       content:counter(sectioncounter) ""; 
       counter-increment:sectioncounter;
    }*/
   /*ol li{ list-style-position:outside;}*/
  </style>
</head>
<body>
    <div class="page-group">
      <div class="page">



          

          <!-- <div class="content"> -->
            <!-- <div class="buttons-tab fixed-tab" data-offset="44"> -->
              <!-- <div onclick="changeMenu(0)" id="divtop_unid">待下达</div> -->
              <!-- <div onclick="changeMenu(1)" id="divtop_id">已下达</div> -->
            <!-- </div> -->
          <!-- </div> -->
          <div id="div_topheader">
              <div class="buttons-tab" style="z-index: 3000">
                  <a class="tab-link button active" id="daixiada" onclick="changeMenu(0)" >发运指令</a>
                  <a class="tab-link button" id="yixiada" onclick="changeMenu(1)">返空指令</a>
              </div>
          </div>
        
        


              <div class="content infinite-scroll infinite-scroll-bottom" data-distance="100" id="main">
                  <div class="list-block" id="li_block" style="font-size:15px;margin-top:100px;z-index: 1500;">
                      <ul class="list-container" >
                      </ul>
                  </div>
                  <!-- 加载提示符 -->
                  <div class="infinite-scroll-preloader">
                      <div class="preloader"></div>
                  </div>
              </div>
      <div class="search">
           <p><a href="#" class="button button-round" onclick="toadd()">添加指令</a></p>
        </div>
    </div>



  </div>

  <!-- ! 固定的js引用，所有的jQuery 要用 $$ 表示 --> 
<script type="text/javascript" src="http://106.12.207.1:8080/wuliucommon/js/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">var $$ =jQuery.noConflict();</script>

<script type='text/javascript' src='http://106.12.207.1:8080/wuliucommon/zepto/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://106.12.207.1:8080/wuliucommon/js/js/sin.js' charset='utf-8'></script>
<script src="http://106.12.207.1:8080/wuliucommon/js/js/swiper/ser.js"></script>

<script type='text/javascript'>


// 加载flag
      var loading = false;
      // 最多可加载的条目
      var maxItems = 100;
      var offset = 1;
      var limit = 17;
      var datalist = new Array();
      var isdeletebottom = false;
      var ctype = 0;//默认为待下达，0：待下达  1：已下达
      var loadingdata = false;

      var pagepermission = "0";//判断当前界面的权限，登录人能看到已下达还是待下达还是全部都能看到

      // 注册'infinite'事件处理函数
      $(document).on('infinite', '.infinite-scroll-bottom',function() {
          // 如果正在加载，则退出
          if (loading) return;
          // 设置flag
          loading = true;

          // 模拟1s的加载过程
          // setTimeout(function() {
              // 重置加载flag
              
              console.log('================'+lastlength + '====' + limit);
              if (lastlength < limit) {
                  // 加载完毕，则注销无限加载事件，以防不必要的加载
                  $.detachInfiniteScroll($('.infinite-scroll'));
                  isdeletebottom = true;
                  // 删除加载提示符
                  // $('.infinite-scroll-preloader').remove();
                  return;
              }
               offset = offset + 1;
               getData();
              // 添加新条目
              // addItems(itemsPerLoad, lastIndex);
              // 更新最后加载的序号
              //容器发生改变,如果是js滚动，需要刷新滚动
              // $.refreshScroller();
          // }, 500);
      });


function changeMenu(type){
  ctype = type;
  
  offset = 1;
  //$("#searchinput").val("");
  if(ctype == 0){//改变样式
    $$("#daixiada").attr("class","tab-link button active");
    $$("#yixiada").attr("class","tab-link button");
    $('.list-container').html("");
  }else{
    $$("#daixiada").attr("class","tab-link button");
    $$("#yixiada").attr("class","tab-link button active");
    $('.list-container').html("");
  }

  getData();
}



function searchData(){
  offset = 1;
  getData();
}

function getData(){

  if(isdeletebottom){
            isdeletebottom = false;
            $$("#main").append('<div class="infinite-scroll-preloader" id="placeholder"><div class="preloader"></div></div>');

            $.attachInfiniteScroll($('.infinite-scroll'))
  }

  if(ctype == 0){
    getData1();
  }else if(ctype == 1){
    getData2();
  }else{

  }
}


//获取待下达
function getData1(){

  var param = {}
  
  var url = "instruct/wlInstruct/api/find_pagelist"+SESSIONID+"?page_no="+offset+"&page_size="+limit+"&type="+ctype;
  // // var url = 'apis/books';
  // param.page_no = offset;
  // param.page_size = limit;
  net_request('get',url,param,successCallBack1,errorCallBack);
}

//获取已下达
function getData2(){
  var param = {}
  
  var url = "instruct/wlInstruct/api/find_pagelist"+SESSIONID+"?page_no="+offset+"&page_size="+limit+"&type="+ctype;


  // // var url = 'apis/books';
  // param.page_no = offset;
  // param.page_size = limit;



  net_request('get',url,param,successCallBack1,errorCallBack);
}


//成功函数回调 页面
function successCallBack1(data){
  // <li class="item-content" id="imli"><div class="item-inner" id="it_iner"><div class="item-title"><img  src="' + item.img + '"><span>' + item.name + '</span></div></div></li>

  if (isNotNull(data)) {
    var databody = data.list;
    if (offset == 1) {
      datalist = new Array();
      $('.list-container').html("");
    }
    var html = '';
    if (isNotNull(databody)) {
        
       
       lastlength = databody.length;
       for (var i = 0; i < databody.length; i++) {
          var item = databody[i];
          datalist.push(item);
      }

      for (var i = 0; i < databody.length; i++) {
            var item = databody[i];

            if (isNotNull(item)) {

              var exestate = "已提交"
              if(item.executeState == 0){
                  exestate = "草稿";
              }else if(item.executeState == 1){
                  exestate = "已提交";
              }else if(item.executeState == 2){
                  exestate = "执行中";
              }else if(item.executeState == 3){
                  exestate = "已完成";
              }else if(item.executeState == 4){
                  exestate = "已终止";
              }
              var strdatetip = "发运日期";
              if(ctype == 0){
                strdatetip = "发运日期";
              }else{
                strdatetip = "返空日期";
              }

              
              var chtml = `<li class="item-content" style="padding:0 0.3rem;"  data="${item.id}" onclick="tocheck(this)">
                          <div class="content-block childContent">
                            <div class="myBackground">
                              
                              <div class="segmentation">
                                <div><span>指令编码：</span><span>${item.instructNo}</span></div>
                              </div>
                              <div class="segmentation">
                                  <div><span>指令接收人：</span><span>${item.name}</span></div>
                              </div>
                              <div class="mykind segmentation">
                                <div class="fifty"><span>执行状态：</span><span>${exestate}</span></div>
                                <div class="fifty"><span>箱子数量：</span><span>${item.boxAmount}</span></div>              
                              </div>
                              <div class="mykind segmentation">
                                  <div class="fifty"><span>发运地：</span><span>${item.sendFrom}</span></div>
                                  <div class="fifty"><span>目的地：</span><span>${item.sendTo}&nbsp;</span></div>                  
                              </div>
                              
                              <div class="segmentation">
                                <div><span>项目名称：</span><span>${item.projectName}</span></div>
                              </div>
                              <div class="segmentation">
                                  <div><span>${strdatetip}：</span><span>${item.sendEmptyDate}</span></div>
                              </div>
                              
                            </div>
                              
                          </div>
                      </li>`;



              html += chtml;
            }           

      }
    }


    $('.list-container').append(html);
    
    if(datalist.length == 0){
      html = "";
      $('.list-container').html(html);
    }

    
    loading = false;

    if (lastlength < limit || datalist.length == 0) {
        // 加载完毕，则注销无限加载事件，以防不必要的加载
        $.detachInfiniteScroll($('.infinite-scroll'));
        // 删除加载提示符
        $('.infinite-scroll-preloader').remove();
        isdeletebottom = true;
      }

  }
}



//失败函数
function errorCallBack(){
}


function tocheck(cthis){
  var ccid = $(cthis).attr("data");
native_goto("local/inst_details?cid="+ccid+"&type="+ctype+"&show=edit");
}

function toadd(){
  native_goto("local/inst_details?type="+ctype+"&show=add");
}

function getParams(data){
  var jodata = urlParamParseJson(data);
     if(isNotNull(jodata) && isNotNull(jodata.menupermission)){//
        pagepermission = jodata.menupermission;
          ctype = 0;
           offset = 1;
          getData();
     }

}


$(function () {
    $.init();
    // 获取初步显示列表
    ctype = 0;
    offset = 1;
    getData();
    
    
});

</script>

</body>
</html>